import './index.scss'
import {imagesUrl} from '@/utils/baseUrl'
import {paramStatus2Color} from '@/utils/common'
import {Image, Text, View} from '@tarojs/components'
import {CSSProperties} from 'react'
import {DeviceStatusIcon, ParamStatusIcon} from '../images'

interface ParamInfo {
  paramStatus?: string
  paramName?: string
  paramValue?: string | number
  paramUnit?: string
}
interface DevInfo {
  devName?: string
  status?: string
}

/**设备名称 */
export const DeviceName: React.FC<{value?: string}> = ({
  value
}): JSX.Element => {
  //  absolute top-16 left-16
  return <View className="hanzi h-16 text-14">{value || '---'}</View>
}

/**设备状态 */
export const DeviceStatus: React.FC<{
  value?: string
}> = ({value}): JSX.Element => {
  return (
    <View className="hanzi h-16 text-14 flex items-center">
      <Image
        src={imagesUrl + 'icon/device-onLine.png'}
        className="w-16 h-16 mr-6"
      ></Image>
      <Text className="hanzi h-16 leading-16 text-14">{value || '---'}</Text>
    </View>
  )
}

/**设备标识 */
export const DeviceTarget: React.FC<{value?: string}> = ({
  value
}): JSX.Element => {
  if (value === undefined) {
    return (
      <View className="w-311 h-15 mt-5 text-11 flex justify-end">
        <View
          className="w-100 h-15"
          style={{
            backgroundColor: '#f0f0f0'
          }}
        ></View>
      </View>
    )
  } else {
    return (
      <View className="w-311 h-15 mt-5 text-11 text-xxx_text text-right">
        {value || '---'}
      </View>
    )
  }
}

/**设备地址和参数更新时间 */
export const DeviceLocation: React.FC<{
  updateTime?: string
  loacltion?: string
}> = ({updateTime, loacltion}): JSX.Element => {
  if ([updateTime, loacltion].includes(undefined)) {
    return (
      <View className="w-311 h-15 text-11 flex justify-end">
        <View
          className="w-265 h-15 float-right"
          style={{
            backgroundColor: '#f0f0f0'
          }}
        ></View>
      </View>
    )
  } else {
    return (
      <View className="w-311 h-15 flex justify-end">
        <View className="h-15 mr-6 text-11 text-xxx_text">
          {updateTime !== 'N/A' && updateTime
            ? '更新 ' + updateTime
            : '暂无更新时间'}
        </View>
        <View className="h-15 text-11 text-xxx_text">{loacltion || '---'}</View>
      </View>
    )
  }
}

/**参数状态 */
export const ParamStatusCircle: React.FC<{
  status?: string
  className?: string
}> = ({status, className}): JSX.Element => {
  return (
    <View
      className={`w-8 h-8 rounded-full ${className}`}
      style={{
        background: paramStatus2Color(status)
      }}
    ></View>
  )
}

/**参数状态 */
export const ParamStatusText: React.FC<{
  status?: string
  style?: CSSProperties
}> = ({status, style}): JSX.Element => {
  return (
    <View
      className="text-14 font-normal text-info_text text-right"
      style={Object.assign(
        {
          height: '40rpx'
        },
        style
      )}
    >
      {status || '---'}
    </View>
  )
}

/**参数值 */
export const ParamValue: React.FC<{
  value?: number | string
  unit?: string
}> = ({value, unit}): JSX.Element => {
  return (
    <View className="h-20 mr-6 flex items-center">
      <View className="notHanzi mr-6 text-14 text-xx_text truncate">
        {value || '---'}
      </View>
      <View className="notHanzi text-12 text-xx_text">{unit}</View>
    </View>
  )
}
/**参数名 */
export const ParamName: React.FC<{
  name?: string
  className?: string
}> = ({name, className}): JSX.Element => {
  return (
    <View
      className={`hanzi font-normal text-14 text-x_text ${className || ''}`}
    >
      {name}
    </View>
  )
}

/**参数栏 */
export const ParamItem: React.FC<ParamInfo> = ({
  paramStatus,
  paramName,
  paramValue,
  paramUnit
}): JSX.Element => {
  if ([paramStatus, paramName, paramValue, paramUnit].includes(undefined)) {
    return (
      <View className="h-34 flex items-center">
        <View
          className="w-full h-16 mx-7"
          style={{
            backgroundColor: '#f0f0f0'
          }}
        ></View>
      </View>
    )
  } else {
    return (
      <View className="h-34 pl-10 pr-6 flex items-center">
        <View className="mr-8">
          <ParamStatusIcon status={paramStatus as string}></ParamStatusIcon>
          {/* <ParamStatusCircle status={paramStatus}></ParamStatusCircle> */}
        </View>
        <View className="min-w-56 max-w-100 mr-8 overflow-hidden hanzi font-normal text-14 text-x_text">
          {paramName}
        </View>
        <View className="flex-1 h-20 mr-6 flex items-center overflow-hidden">
          <ParamValue unit={paramUnit} value={paramValue}></ParamValue>
        </View>
        <ParamStatusText status={paramStatus}></ParamStatusText>
      </View>
    )
  }
}

/**参数卡片头 */
export const ParamsCardHeader: React.FC<DevInfo> = ({
  devName,
  status
}): JSX.Element => {
  if (devName === undefined && status === undefined) {
    return (
      <View className="w-full h-48 mx-auto flex justify-between items-center">
        <View
          className="w-full h-16"
          style={{
            backgroundColor: '#f0f0f0'
          }}
        ></View>
      </View>
    )
  } else {
    return (
      <View className="w-full h-48 px-16 mx-auto flex justify-between items-center">
        {/* 设备名称 */}
        <View className="hanzi h-16 text-14">{devName || '---'}</View>
        {/* 设备状态 */}
        <View className="hanzi h-16 text-14 flex items-center">
          <DeviceStatusIcon
            status={status as string}
            style={{marginRight: '12rpx'}}
          ></DeviceStatusIcon>
          <Text className="hanzi h-16 leading-16 text-14">
            {status || '---'}
          </Text>
        </View>
      </View>
    )
  }
}
/**参数卡片 参数列表 */
export const ParamsCardContent: React.FC<{list?: Device.ParamData[]}> = ({
  list
}): JSX.Element => {
  if (!list) {
    return (
      <View className="flex-1 w-full px-9 overflow-hidden">
        <ParamItem></ParamItem>
        <ParamItem></ParamItem>
        <ParamItem></ParamItem>
        <ParamItem></ParamItem>
        <ParamItem></ParamItem>
        {/* {list} */}
      </View>
    )
  } else {
    // return (
    //   <View className="w-full h-170 pl-19 pr-15 overflow-hidden grid grid-cols-19 gap-x-8 gap-y-4">
    //     {list.map(item => [
    //       <View className="h-31 flex items-center justify-center">
    //         <ParamStatusIcon
    //           status={item.paramStatus as string}
    //         ></ParamStatusIcon>
    //       </View>,
    //       <View className="truncate hanzi font-normal text-14 text-x_text col-span-6 h-31 leading-31">
    //         {item.paramName}
    //       </View>,
    //       <View className="col-span-6 flex-1 h-31 pl-8 flex items-center overflow-hidden truncate">
    //         <ParamValue
    //           unit={item.paramUnit}
    //           value={item.paramValue}
    //         ></ParamValue>
    //       </View>,
    //       <ParamStatusText
    //         status={item.paramStatus}
    //         style={{
    //           height: '62rpx',
    //           gridColumn: 'span 6 / span 6'
    //         }}
    //       ></ParamStatusText>
    //     ])}
    //   </View>
    // )
    // list.push({})
    let paramList = list.length > 6 ? list.slice(0, 6) : list

    console.log(paramList)
    return (
      <View>
        <View className="flex-1 w-full pl-19 pr-15 overflow-hidden flex items-center gap-x-8 gap-y-4">
          {/* 参数状态(圆圈) */}
          <View className="h-full overflow-hidden">
            {paramList.map(item => (
              <View className="h-30 flex items-center justify-center">
                <ParamStatusIcon
                  status={item.paramStatus as string}
                ></ParamStatusIcon>
                {/* <View>{list}</View> */}
              </View>
            ))}
          </View>
          {/* 参数名称 */}
          <View className="h-full overflow-hidden">
            {paramList.map(item => (
              <View className="truncate hanzi font-normal text-14 text-x_text h-30 leading-30">
                {item.paramName}
              </View>
            ))}
          </View>

          {/* 参数值 */}
          <View className="flex-1 h-full overflow-hidden">
            {paramList.map(item => (
              <View className="flex-1 h-30 leading-30 text-left pl-8 flex items-center truncate">
                <ParamValue
                  unit={item.paramUnit}
                  value={item.paramValue}
                ></ParamValue>
              </View>
            ))}
          </View>

          {/* 参数状态 (汉字) */}
          <View className="h-full overflow-hidden">
            {paramList.map(item => (
              <ParamStatusText
                status={item.paramStatus}
                style={{
                  height: '60rpx',
                  lineHeight: '60rpx'
                }}
              ></ParamStatusText>
            ))}
          </View>
        </View>
        {list.length > 6 ? <View className="omit_box">......</View> : null}
      </View>
    )
  }
}

/**参数卡片底部 */
export const ParamsCardFooter: React.FC<{
  updateTime?: string
  loacltion?: string
  devTarget?: string
}> = ({updateTime, loacltion, devTarget}): JSX.Element => {
  return (
    <View className="w-full h-62 mx-auto text-11 flex flex-col justify-center items-center">
      <DeviceLocation
        updateTime={updateTime}
        loacltion={loacltion}
      ></DeviceLocation>
      {/* 参数卡片设备标识 */}
      <DeviceTarget value={devTarget}></DeviceTarget>
    </View>
  )
}

/**参数卡片 */
const ParamsCard: React.FC<{
  devName?: string
  devStatus?: string
  info?: Device.DevDetailData
}> = ({info, devName, devStatus}): JSX.Element => {
  const handleLocation = (
    province?: string,
    city?: string,
    district?: string
  ) => {
    let p = province === 'N/A' || !province ? null : province
    let c = city === 'N/A' || !city ? null : city
    let d = district === 'N/A' || !district ? null : district
    if (!p && !c && !d) {
      return '暂未设置地址'
    } else if (!p || !c || !d) {
      return `${p || '-- '}- ${c || '-- '}- ${d || '-- '}`
    } else {
      return `${p}-${c}-${d}`
    }
  }

  return (
    <View
      className="w-full h-full mx-auto rounded-card bg-white relative overflow-hidden flex flex-col"
      style={{
        boxShadow: '0 0 8rpx 0 #E1E3E4',
        background:
          'linear-gradient(-8deg, #ECF7FF 0%, rgba(255,255,255,0) 25%,rgba(255,255,255,0) 75%,#ECF7FF 100%)'
      }}
    >
      {/* 参数卡片头部 */}
      <ParamsCardHeader devName={devName} status={devStatus}></ParamsCardHeader>

      {/* 参数列表 */}
      <ParamsCardContent list={info?.paramList}></ParamsCardContent>

      {/* 参数卡片 更新时间以及地址 */}
      <ParamsCardFooter
        updateTime={info?.updateDate}
        loacltion={handleLocation(info?.province, info?.city, info?.district)}
        devTarget={info?.belongUser}
      ></ParamsCardFooter>
    </View>
  )
}

export default ParamsCard
